<template>
  <view>
    <view class="flex-box flex-col" style="height: 100vh;">
      <view class="mapbox flex-grow-1">
        <map :scale="scale" style="width: 100vw; height: 100%;" enable-3D="false" :show-location="true" id="map"
             ref="map" :markers="markers" @callouttap="bindMapCallout" :longitude="longitude"
             :latitude="latitude">
        </map>
        <swiper class="areasbox" :current="currnet" @change="swiperchange" next-margin="40rpx">
          <swiper-item v-for="(item, index) in now_json_arr">
            <view class="areaitem">
              <view class="fs30 single-line">{{ index + 1 }}.{{ item.name }}</view>
              <view class="flex-box pt10">
                <image src="/static/icon/icon_distance.png" class="icon_distance"></image>
                <view v-if="item.distance" class="fs22 col89">{{ item.distance }}</view>
              </view>
            </view>
          </swiper-item>
        </swiper>
        <view class="facilitiesbox">
          <view class="facitem" data-facindex="0" @tap="choosefac" v-if="false">
            <image :src="'/static/icon/icon_around1' + (fac == 0 ? '' : '-g') + '.png'" class="icon_around">
            </image>
            <view :class="'fs24 ' + (fac == 0 ? '' : 'col89')">
              公交({{ type == 1 ? house_info.village2.nearby_bus_num : house_info.nearby_bus_num }})
            </view>
          </view>
          <view class="facitem" data-facindex="1" @tap="choosefac" v-if="false">
            <image :src="'/static/icon/icon_around2' + (fac == 1 ? '' : '-g') + '.png'" class="icon_around">
            </image>
            <view :class="'fs24 ' + (fac == 1 ? '' : 'col89')">
              地铁({{ type == 1 ? house_info.village2.nearby_subway_num : house_info.nearby_subway_num }})
            </view>
          </view>
          <view class="facitem" data-facindex="2" @tap="choosefac">
            <image :src="'/static/icon/icon_around3' + (fac == 2 ? '' : '-g') + '.png'" class="icon_around">
            </image>
            <view :class="'fs24 ' + (fac == 2 ? '' : 'col89')">
              学校({{ type == 1 ? house_info.village2.nearby_school_num : house_info.nearby_school_num }})
            </view>
          </view>
          <view class="facitem" data-facindex="3" @tap="choosefac">
            <image :src="'/static/icon/icon_around4' + (fac == 3 ? '' : '-g') + '.png'" class="icon_around">
            </image>
            <view :class="'fs24 ' + (fac == 3 ? '' : 'col89')">
              购物({{ type == 1 ? house_info.village2.nearby_shop_num : house_info.nearby_shop_num }})
            </view>
          </view>
          <view class="facitem" data-facindex="4" @tap="choosefac">
            <image :src="'/static/icon/icon_around5' + (fac == 4 ? '' : '-g') + '.png'" class="icon_around">
            </image>
            <view :class="'fs24 ' + (fac == 4 ? '' : 'col89')">
              医疗({{ type == 1 ? house_info.village2.nearby_hospital_num : house_info.nearby_hospital_num }})
            </view>
          </view>
        </view>
      </view>
      <view class="page-foot bgf">
        <view class="footbox" v-if="house_info&&house_info.default_broker">
          <view v-if="house_info&&house_info.default_broker" class="flex-box flex-between foot1">
            <navigator class="flex-box" :url="'/pages/newBroker/broker/broker?id='+house_info.default_broker.user.id">
              <image :src="house_info.default_broker.user.avatar" class="footavatar" mode="aspectFill">
              </image>
              <view>
                <view class="name">{{ house_info.default_broker.user.nickname }}</view>
                <!-- <view class="fs24 col8">服务<text
                    class="orange">{{ house_info.default_broker.profile.service_num }}</text>人
                </view> -->
              </view>
            </navigator>
            <view class="flex-box">
              <view @tap="bindPhoneCall" :data-tel="house_info.default_broker.user.mobile" data-type="2"
                    data-subtype="0" class="btn1">打电话
              </view>
              <!-- <view @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</view> -->
              <!-- <view @tap="jumpToChat" :data-uid="house_info.default_broker.user.id" class="btn2">立即微聊</view> -->
              <!-- <button open-type="contact" class="btn2">立即微聊</button> -->
              <button class="btn2" @tap.stop.prevent="jumpToPop"
                      :data-wechatnum="house_info.default_broker.user.mobile">加微信
              </button>
            </view>
        </view>

      </view>


      <view class="footbox" v-else>
        <button @tap="bindPhoneCall"
                :data-tel="house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel"
                class="contactkefu flex-box flex-between">
          <image src="/static/icon/icon_kefubg.png" class="kefubg"></image>
          <view class="tl">
            <view class="fs40 pb10">{{
                house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel
              }}
            </view>
            <view class="fs24">拨打热线，免费提供专属楼盘分析</view>
          </view>
          <image src="/static/icon/icon_tel.png" class="tel"></image>
        </button>
      </view>
      </view>
    </view>


    <!-- 预约弹窗start -->
    <u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
      <view class="zixun-pop">
        <template v-if="appoint_type == 1 && appoint_subscribe_type == 2">
          <view class="fs40 black tc mb20">订阅楼盘开盘通知</view>
          <view class="fs30 col-darkGray tc mb40">
            <view>楼盘总是悄无声息的开盘？</view>
            <view>一键订阅，让您抢占买房先机！</view>
          </view>
        </template>
        <template v-else-if="appoint_type == 1 && appoint_subscribe_type == 1">
          <view class="fs40 black tc mb20">订阅价格变动通知</view>
          <view class="fs30 col-darkGray tc mb40">
            <view>价格变动这么快？订阅价格变动通知</view>
            <view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
          </view>
        </template>
        <template v-else-if="appoint_type == 1 && appoint_subscribe_type == 3">
          <view class="fs40 black tc mb20">订阅实时动态通知</view>
          <view class="fs30 col-darkGray tc mb40">
            <view>价格变动这么快？订阅价格变动通知</view>
            <view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
          </view>
        </template>
        <template v-else-if="appoint_type == 3 && appoint_subscribe_type == 0">
          <view class="fs40 black tc mb20">免费专车看房</view>
          <view class="fs30 col-darkGray tc mb40">
            <view>公交太累，打车太贵，看房团还要等位</view>
            <view>佳和房产带您免费专车看房，省时，省力，还包来回！</view>
          </view>
        </template>
        <template v-else-if="appoint_type == 2 && appoint_subscribe_type == 0">
          <view class="fs40 black tc mb20">我要咨询</view>
          <view class="fs30 col-darkGray tc mb40">
            <view>该项目有哪些优劣势？性价比如何？</view>
            <view>还有什么类似楼盘推荐……</view>
            <view>更多问题，咨询师帮你答疑解惑</view>
          </view>
        </template>
        <view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun"
                                                                              :value="appoint_mobile"
                                                                              class="input flex-grow-1" type="number"
                                                                              placeholder="请输入手机号码"
                                                                              placeholder-style="color:#ccc;"/></view>
        <view @tap="submitAppointLog" class="btn1 mb30">确认</view>
        <!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
        <button open-type="contact" class="btn2 mb20">立即微聊</button>
      </view>
    </u-popup>
    <!-- 预约弹窗end -->
    <!-- 预约成功弹窗start -->
    <u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
      <view class="reserve">
        <image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
        <view class="title1">预约成功</view>
        <view class="title2">用手机号码{{
            appoint_mobile_text
          }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话
        </view>
        <button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
        <!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
        <button open-type="contact" class="reserve-btn2">立即微聊</button>
      </view>
    </u-popup>
    <!-- 预约成功弹窗end -->
    <!-- 弹出微信号 start-->
    <u-popup :show="wechatStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeWeChatStatus">
      <view class="reserve" style="padding: 90rpx 40rpx 30rpx;">
        <view class="title1">咨询师微信号</view>
        <view class="title2">{{ wechatnum }}</view>
        <button class="reserve-btn2" @tap="closeWeChatStatus">复制</button>
      </view>
    </u-popup>
    <!-- 弹出微信号 end -->
  </view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	let mapCtx = null;
	export default {
		data() {
			return {
        wechatnum:'',
        wechatStatus:false,
				popupStatus: false,
				reserveStatus: false,
				// 预约订阅类型
				appoint_type: 1,

				type:1,
				//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				// 订阅分类
				appoint_subscribe_type: 0,

				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',

				appoint_mobile_text: '',
				broker_user_id: 0,
				house_info: null,

				longitude: 0,
				latitude: 0,
				markers: [],
				markerData: [],
				scale: 14,

				now_json_arr: [],
				currnet: 0,

				house_or_rental: 0, //0=从楼盘详情过来的，1=从租房详情过来的
				fac: 2,
			};
		},
		onLoad: function(options) {
			let that = this;
			var house_info = app.globalData.pagesParamHouseInfo;
			this.house_or_rental = options.type || 0;
			this.house_info = house_info;
			this.initData();
		},
		methods: {

			//微信弹框
			jumpToPop(e){
				this.wechatnum = e.currentTarget.dataset.wechatnum || 0;

				this.wechatStatus=true;

			},
      closeWeChatStatus() {
        var text = this.wechatnum
        uni.setClipboardData({
          data: this.wechatnum,
          success: () => {
            console.log('复制成功');
          },
          fail: (err) => {
            console.log('复制失败', err);
          }
        });
        this.wechatStatus = false;
      },

			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;

				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				}

				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						functions.jumpToChat(uid, that.house_info.id);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 添加预约记录
			addAppointLog(e) {
				var uid = e.currentTarget.dataset.uid || 0;

				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				}
				this.appoint_type = e.currentTarget.dataset.type;
				this.appoint_subscribe_type = e.currentTarget.dataset.subtype;
				this.broker_user_id = uid;
				// 处理手机号码
				this.appoint_mobile = uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus = true;
			},

			appoint_mobileFun(e) {
				this.appoint_mobile = e.detail.value
			},

			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
					functions.toast('请输入正确的手机号');
					return false;
				}
				functions.checkLogin(function(ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile = appoint_mobile;

						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log', {
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
								house_id: that.house_info.id,
								prov: that.house_info.prov,
								city: that.house_info.city,
								region: that.house_info.region
							},
							function(res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' +
									appoint_mobile.substr(7);
								that.reserveStatus = true;
								that.popupStatus = false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			closePopupStatus() {
				this.popupStatus = false;
			},
			closeReserveStatus() {
				this.reserveStatus = false;
			},

			// 拨打电话
			bindPhoneCall(e) {
				var tel = e.currentTarget.dataset.tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			},
			choosefac(e) {
				this.fac = e.currentTarget.dataset.facindex
				this.initData();
			},
			bindMapCallout: function(e) {
				let id = e.detail.markerId;
				var markers = [];
				var markerData = this.markerData;

				for (let item of markerData) {
					if (item.id == id) {
						item.isActive = true;
					} else {
						item.isActive = false;
					}

					let marker = this.createMarker(item);
					markers.push(marker);
				}

				this.markers = markers
				this.id = id
				this.currnet = id
			},
			//滑动
			swiperchange(e) {
				let id = e.detail.current;
				var markers = [];
				var markerData = this.markerData;

				for (let item of markerData) {
					if (item.id == id) {
						item.isActive = true;
					} else {
						item.isActive = false;
					}

					let marker = this.createMarker(item);
					markers.push(marker);
				}

				this.markers = markers
				this.id = id;
			},
			initData() {
				var fac = Number(this.fac);
				var house_info = app.globalData.pagesParamHouseInfo;
				console.log(fac,this.type,house_info.village2)
				var now_json_arr = [];

				switch (fac) {
					case 1:
						now_json_arr = this.type == 1?house_info.village2.nearby_subway_json_arr:house_info.nearby_subway_json_arr;
						break;

					case 2:
						now_json_arr = this.type == 1?house_info.village2.nearby_school_json_arr:house_info.nearby_school_json_arr;
						break;

					case 3:
						now_json_arr = this.type == 1?house_info.village2.nearby_shop_json_arr:house_info.nearby_shop_json_arr;
						break;
					case 4:
						now_json_arr = this.type == 1?house_info.village2.nearby_hospital_json_arr:house_info.nearby_hospital_json_arr;
						break;
					default:
						now_json_arr = this.type == 1?house_info.village2.nearby_bus_json_arr:house_info.nearby_bus_json_arr;
						break;
				}

				var markerData = [];
				var markers = [];
				for (let index = 0; index < now_json_arr.length; index++) {
					const element = now_json_arr[index];
					console.log('单项element:')
					console.log(element)
					var item = {
						id: index,
						latitude: element.lat,
						longitude: element.lng,
						name: Number(index + 1)+element.name,
						isActive: index == 0 ? true : false
					};
					markerData.push(item);
					let marker = this.createMarker(item);
					markers.push(marker);
				}



				this.markers = markers;
				if (markerData.length > 0) {
					var arr = functions.getMapCenter(markerData);
					this.longitude = arr[0];
					this.latitude = arr[1];
				} else {
					this.longitude = house_info.village2.lng;
					this.latitude = house_info.village2.lat;
				}

				this.markerData = markerData;
				this.now_json_arr = now_json_arr
			},
			createMarker: function(point) {
				let marker = {
					id: point.id || 0,
					latitude: point.latitude,
					longitude: point.longitude,
					size: 'long',
					iconPath: '/static/icon/icon_map-none.png',
					callout: {
						content: point.name,
						textAlign: 'center',
						color: '#fff',
						fontSize: 10,
						borderRadius: 4,
						borderWidth: 1,
						borderColor: point.isActive ? '#FF7B40' : '#0091FF',
						bgColor: point.isActive ? '#FF7B40' : '#0091FF',
						padding: '5',
						display: 'ALWAYS'
					}
				};
				return marker;
			},
		}
	}
</script>

<style lang="less" scoped>
	.mapbox {
		position: relative;
	}

	#map {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 10;
	}

	.areasbox {
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0rpx;
		z-index: 90;
		height: 200rpx;
	}

	.areaitem {
		margin: 40rpx auto;
		width: 680rpx;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	.icon_distance {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.facilitiesbox {
		height: 570rpx;
		width: 110rpx;
		padding: 20rpx 0;
		position: absolute;
		right: 40rpx;
		bottom: 200rpx;
		z-index: 90;
		background-color: #fff;
		border-radius: 8rpx;
		text-align: center;
	}

	.facilitiesbox .facitem {
		width: 110rpx;
		height: 110rpx;
	}

	.icon_around {
		width: 52rpx;
		height: 52rpx;
	}

	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
	}

	.footavatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.footbox .name {
		font-size: var(--fs32);
		line-height: 43rpx;
	}

	.footbox .btn1 {
		width: 220rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		font-size: var(--fs34);
		font-weight: normal;
		height: 90rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	}

	.footbox .btn2 {
		width: 220rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		font-size: var(--fs34);
		font-weight: normal;
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		margin-left: 15rpx;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
	}


	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: var(--fs24);
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: var(--fs24);
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
		border-top: 1px solid #f6f7fa;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
	}


	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
		padding:0 40rpx;
		box-sizing:border-box;
	}

	.footbox button.contactkefu {
		width: 100%;
		height: 150rpx;
		border-radius: 15px;
		position: relative;
		padding-left: 150rpx;
		color: var(--blue);
	}

	.footbox .kefubg {
		position: absolute;
		width: 670rpx;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.footbox .contactkefu .tel {
		width: 90rpx;
		height: 90rpx;
	}


	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
		padding:0 40rpx;
		box-sizing:border-box;
	}

	.footbox button.contactkefu {
		width: 100%;
		height: 150rpx;
		border-radius: 15px;
		position: relative;
		padding-left: 150rpx;
		color: var(--blue);
	}

	.footbox .kefubg {
		position: absolute;
		width: 670rpx;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.footbox .contactkefu .tel {
		width: 90rpx;
		height: 90rpx;
	}


</style>
